<!--党业融合研学交流路线-->
<template>
  <div class="redBase">
    <div class="content" v-if="$route.meta.navShow">
      <!--导航栏-->
      <div class="theNavigationBar">
        <div class="logo">
          <div class="returnBtn"><img src="@/assets/static/image/redBase/fanhui.png" alt="返回" @click="returnBtn" ></div>
          <div class="theNavigationBar">
            <div class="logoTitle">
              <img :src="require(`@/assets/static/image/redBase/${$store.state.redBase.routerId}.png`)" alt="主题">
            </div>
            <nav class="navigation">
              <div class="nav">
                <div class="item" :class="[$store.state.redBase.routerId === 'communicationLine' ? 'active' : '']" @click="navBtn('communicationLine')"><span>党业融合研学交流路线</span></div>
                <div class="item" :class="[$store.state.redBase.routerId === 'educationBase' ? 'active' : '']" @click="navBtn('educationBase')"><span>红色文化教育基地</span></div>
              </div>
            </nav>
          </div>
        </div>
     </div>
      <!--地图-->
      <TheMap></TheMap>
      <!--内容-->
      <TheArticleContent></TheArticleContent>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import TheMap from "components/redBase/TheMap.vue";
import TheArticleContent from "components/redBase/TheArticleContent.vue";
export default {
  components:{
    TheMap,
    TheArticleContent
  },
  created(){
    //敏行api,修改安卓状态栏颜色
    MXWebui.setStatusBarColor("#B12223")
  },
  destroyed(){
    //敏行api,还原安卓状态栏颜色
    MXWebui.setStatusBarColor("#F33622")
  },
  mounted(){
    this.$store.dispatch('redBase/getRedRouteList',this.$store.state.redBase.routerId);
  },
  methods:{
    /**
     * @param data 路由ID
     */
    navBtn(data){
      this.$store.commit('redBase/setRouter',data)
      this.$store.dispatch('redBase/getRedRouteList',data);
    },
    /**
     * 返回首页
     */
    returnBtn(){
      this.$router.push({name:'Home'})
    }
  }
}
</script>

<style scoped lang="less">
@import "@/assets/css/redBase/redBase";
</style>